<!DOCTYPE html>
<html>
<head>
    <title>Easy-JTest</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <link href="/static/images/favicon.ico" rel="shortcut icon">
    <link href="/static/jsoneditor/jsoneditor.min.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="/static/jquery/jquery-3.6.0.min.js"></script>
    <script type="text/javascript" src="/static/jquery/jquery.pagination.js"></script>
    <script src="/static/jsoneditor/jsoneditor.min.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f8f9fa;
        }

        .form-group label {
            font-weight: bold;
        }

        .form-group input, .form-group textarea {
            width: 100%;
            padding: 10px;
            border: 1px solid #ced4da;
            border-radius: 5px;
        }

        .form-group button {
            padding: 10px 20px;
            background-color: #007bff;
            color: #fff;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

        .form-group button:hover {
            background-color: #0056b3;
        }

        #jsoneditor {
            border: 1px solid #ced4da; /* 设置边框颜色为蓝色 */
            border-radius: 4px; /* 可选：添加圆角 */
        }

        /* 如果需要更细粒度的控制，可以使用 JSONEditor 的默认类名 */
        .jsoneditor-menu {
            border-bottom: 2px solid #ced4da; /* 设置菜单栏的底部边框颜色 */
            background-color: #ced4da;
        }

        .jsoneditor-form {
            border: 1px solid #ced4da; /* 设置表单视图的边框颜色 */
        }


        .history h3 {
            margin-bottom: 20px;
        }

        .history a {
            display: block;
            margin-bottom: 10px;
            color: #007bff;
            text-decoration: none;
        }

        .history a:hover {
            text-decoration: underline;
        }

        .pagination {
            display: flex;
            justify-content: center;
            margin-top: 20px;
        }

        .pagination li {
            list-style: none;
            margin: 0 5px;
        }

        .pagination li a {
            color: #000;
            padding: 8px 16px;
            text-decoration: none;
            border: 1px solid #007bff;
            border-radius: 3px;
        }

        .pagination li a.active {
            background-color: #007bff;
            color: #fff;
        }
    </style>
</head>
<body>
<h3 style="padding-left:160px ;">Easy-JTest</h3>
<div style="height: 850px;width:600px; border: 1px rgb(78, 110, 242) solid;padding-left:10px ;">
    <from id="invokeForm">
        <p>Class Name:</p>
        <#if beanInfo.memoryInfo.beanName??  && beanInfo.memoryInfo.beanName!= "">
            <input type="text" id="className" name="className" style="height:20px;width:400px;overflow:auto"
                   placeholder="输入类名" value="${beanInfo.memoryInfo.beanName}" disabled>
        <#else>
            <input type="text" id="className" name="className" style="height:20px;width:400px;overflow:auto"
                   placeholder="输入类名" value="">
        </#if>
        <br>
        <br>
        <p>Method Name:</p>
        <#if beanInfo.memoryInfo.methodName??  && beanInfo.memoryInfo.methodName!= "">
            <input type="text" id="methodName" name="methodName" style="height:20px;width:400px;overflow:auto"
                   placeholder="输入方法名" value="${beanInfo.memoryInfo.methodName}" disabled>
        <#else>
            <input type="text" id="methodName" name="methodName" style="height:20px;width:400px;overflow:auto"
                   placeholder="输入方法名">
        </#if>
        <br>
        <br>
        <p>Message:</p>
        <#if beanInfo.memoryInfo.msg??  && beanInfo.memoryInfo.msg!= "">
            <input type="text" id="msg" name="msg" style="height:20px;width:400px;overflow:auto"
                   placeholder="Please enter method description" value="${beanInfo.memoryInfo.msg}">
        <#else>
            <input type="text" id="msg" name="msg" style="height:20px;width:400px;overflow:auto"
                   placeholder="Please enter method description">
        </#if>
        <input type="text" id="parameterTypes" name="parameterTypes"
               style="height:20px;width:400px;overflow:auto;display:none"
               value='${beanInfo.memoryInfo.parameterTypes}'>
        <br>
        <br>
        <p>Parameter:</p>
        <div id="jsoneditor" style="width:590px; height: 400px;"></div>
        <br>
        <br>
        <input id="saveButton" type="submit" value="submit"
               style="position:absolute;left:350px; width: 80px; height: 30px;">
    </from>
</div>
<br>
<br>
<h3>Historical Records:</h3>
<div style="height: 700px;width: 600px; border: 1px rgb(78, 110, 242) solid;padding-left:10px ;overflow-y:auto">

    <#if beanInfo.historyInfo??  && beanInfo.historyInfo!= "">
        ${beanInfo.historyInfo}
    </#if>
</div>
<div id="Pagination" class="right flickr"></div>
<script>
    $(document).ready(function () {
        // 获取容器元素
        const container = document.getElementById('jsoneditor');
        if (!container) {
            console.error('Container not found!');
            return;
        }

        // 初始化 JSONEditor
        const options = {
            mode: 'code', // 你可以选择其他模式，如 'tree', 'form', 'text', 'view'
            modes: ['code', 'tree', 'form', 'text', 'view'],
            onChange: () => {
                console.log('JSON changed:', jsonEditor.get());
            }
        };
        const jsonEditor = new JSONEditor(container, options);

        // 从 FreeMarker 模型中获取初始数据
        const initialData = ${beanInfo.memoryInfo.methodParameter};
        jsonEditor.set(initialData);


        // 绑定提交按钮的 click 事件
        document.getElementById('saveButton').addEventListener('click', function () {

            // 获取表单字段的值
            var className = document.getElementById('className').value;
            var methodName = document.getElementById('methodName').value;
            var msg = document.getElementById('msg').value;
            var parameterTypes = document.getElementById('parameterTypes').value;

            // 从 JSON 编辑器中获取当前的 JSON 数据
            var jsonEditorData = jsonEditor.get();


            // 创建一个 JSON 对象来存储所有表单数据
            var jsonData = {
                className: className,
                methodName: methodName,
                msg: msg,
                parameterTypes: parameterTypes,
                parameter: jsonEditorData
            };

            // 将 JSON 数据转换为字符串
            var jsonString = JSON.stringify(jsonData);

            // 构建完整的 URL
            var fullUrl = '/invokeMethod?data=' + encodeURIComponent(jsonString); // 替换为你的后端接口地址

            // 使用 window.open 打开新窗口
            window.open(fullUrl, '_blank');
        });
        // 绑定点击事件到所有 a 标签
        $('div.log-entry > a').on('click', function (event) {
            event.preventDefault(); // 阻止默认行为（如页面跳转）

            // 获取当前 a 标签所在的 div 中的 input 的值
            var inputValue = $(this).parent().children("input[type='hidden']").val();
            // 打印或处理获取到的值
            console.log(JSON.parse(inputValue));
            const dataStr = JSON.parse(inputValue);
            // 获取表单字段的值
            const className = dataStr.className;
            const methodName = dataStr.methodName;
            const msg = dataStr.msg;
            const parameterTypes = dataStr.parameterTypes;
            const parameter = dataStr.parameter;

            jsonEditor.set(parameter);
            $("#parameterTypes").val(parameterTypes);
            $("#className").val(className);
            $("#methodName").val(methodName);
            $("#methodName").val(methodName);
            $("#msg").val(msg);
        });

    });
</script>
</body>
</html>